<template>
  <div class="piecinge-dialog">
      <div class="piecinge-dialog-header">
        <h3 class="piecinge-dialog-title">第二届世界互联网大会</h3>
        <p class="piecinge-dialog-desc">2019-07-12 13:30:28</p>
      </div>

      <div class="piecinge-dialog-body clearfix" style="display: none;">
        <div class="img-list img-middle-list pull-left">
          <ul>
            <li><img src="./img/pic-1.jpg" alt=""></li>
            <li><img src="./img/pic-2.jpg" alt=""></li>
          </ul>
        </div> 
        <div class="img-list img-small-list pull-right">
          <ul>
            <li><img src="./img/pic-mid-1.jpg" alt=""></li>
            <li><img src="./img/pic-mid-2.jpg" alt=""></li>
            <li><img src="./img/pic-mid-3.jpg" alt=""></li>
          </ul>
        </div>
      </div>


      <div class="piecinge-dialog-body text-center">
        <img src="./img/pic-big-1.jpg" alt="" class="vertical-middle">
      </div>


      <div class="piecinge-footer">
        <div class="meidia clearfix">
          <div class="media-object pull-left"><img src="./img/2vcode.jpg" alt="#"></div>
          <div class="media-body text-right over-hidden">
            <p>&nbsp;</p>
            <p>扫描二维码</p>
            <p>去现场</p>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
    };
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.piecinge-dialog {
  padding: 20px 45px 35px;
  background-color: #fff;
  border-radius: 8px;
  

  .piecinge-dialog-header {
    margin-bottom: 20px;
  }

  .piecinge-dialog-title {
    font-size: 38px;
    color: #000;
    line-height: 2;
  }

  .piecinge-dialog-desc {
    font-size: 30px;
    color: #666;
  }

  .piecinge-footer {
    margin-top: 24px;
    .media-object {
      width: 124px;
      height: 124px;
      overflow: hidden;
      > img { 
        width: 100%;
        height: 100%;
        vertical-align: middle; 
      }
    }

    p {
      font-size: 24px;
      line-height: 38px;
    }
  }


  .img-middle-list {
    width: calc(100% - 220px - 4px);
    li {
      width: 100%;
      height: 332px;
      margin-bottom: 4px;
      overflow: hidden;
    }
  }

  .img-small-list {
    li {
      width: 220px;
      height: 220px;
      margin-bottom: 4px;
      overflow: hidden;
    }
    img {
      width: 220px;
      height: 220px;
      max-width: 220px;
    }
  }



}
</style>